<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link></div>
         -->
        <div class="hei10"></div>

        <div class="o_ul">
          <router-link class="o_li" to="/productionBasismanag">产品渠道中心</router-link>
          <router-link class="o_li " to="/productionBasismanag/productionBasismanagSoldout">已下架的产品</router-link>
          <router-link class="o_li act" to="/productionBasismanag/productionBasismanagDj">自动生产对接</router-link>
        </div>
        <div class="kflexc" style="padding: 35px 40px 0;">
          <div class="nli" style="font-size: 24px;" :class="act == 1?'nliact':''"
            @click="$router.push('/productionBasismanag/productionBasismanagDj')">API接口</div>
          <div class="nli" style="font-size: 24px;" :class="act == 2?'nliact':''"
            @click="$router.push('/productionBasismanag/productionBasismanagAI')">模拟人工接口</div>
        </div>
        <div class="t_add_cont">

          <!-- tips -->
          <div class="t_tips_box kflex">
            <div style="font-weight: bold; color: #000;">功能说明：</div>
            <div style="color: #666666;">
              <div>敢探号通过技术手段给需要人工提单的渠道实现模拟人工自动提单，减轻业务提单压力，已对接成功的渠道在下方罗列，您可选择对接，如果您要提单的渠道不在列表中，你可<span
                  style="color: #f00; margin-left: 5px;">联系客服定制添加</span>，我们将根据难度及通用性评估费用。</div>
              <div>模拟人工提单为增值收费功能，按照提单数量收取，0.15/单，同一订单多次提单只收取一次费用。</div>
            </div>
          </div>

          <!-- 列表 -->
          <el-table :header-cell-style="{background:'#F9F9F9',color:'#3D3D3D'}" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="渠道名称">
              <template slot-scope="scope">
                {{scope.row.user_defined_name}}
                <!-- <i class="el-icon-edit" @click="xiugai2(scope.row)"  style="margin-left: 20px; color: #409EFF; cursor: pointer;"></i> -->
              </template>
            </el-table-column>
            <el-table-column align="center" label="域名">
              <template slot-scope="scope">
                {{scope.row.channel_domain_name}}

              </template>
            </el-table-column>


            <el-table-column align="center" label="参数配置">
              <template slot-scope="scope">
                <div class="kflexcc">
                  <div v-if="scope.row.channel_config_state == 1 && scope.row.data != ''" @click="huoqucanshu(scope.row)" style="color: #409EFF; cursor: pointer;">已配置</div>
                  <div v-if="scope.row.channel_config_state == 0 && scope.row.data != ''" @click="huoqucanshu(scope.row)" style="color: #409EFF; cursor: pointer;">配置</div>

                  <div v-if="scope.row.data == ''" style="cursor: pointer;">无需配置</div>

                  <!-- <el-button @click="huoqucanshu(scope.row)" type="text"><i class="el-icon-edit" style="margin-left: 20px; color: #409EFF; cursor: pointer;"></i></el-button> -->
                </div>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="cookie_state_text" label="cookie状态">
              <template slot-scope="scope">
                {{scope.row.cookie_state_text}}
                <el-button @click="opencookie(scope.row)" type="text"><i class="el-icon-edit" style="margin-left: 20px; color: #409EFF; cursor: pointer;"></i></el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="order_quantity" label="今日提单数量"></el-table-column>
            <el-table-column align="center" prop="order_count" label="今日提单次数"></el-table-column>
            <el-table-column align="center" label="接口订单数据">
              <template slot-scope="scope">
              	<!-- <el-button @click="goid('/productionBasismanag/qudaodingdan',scope.row.channel_id)" type="text">查看</el-button> -->
              </template>
            </el-table-column>
            <el-table-column align="center" prop="problem" label="接口帮助">
              <template slot-scope="scope">
                <el-button @click="checkdesc(scope.row.problem)" type="text">查看说明文档</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" width="300px" prop="jkhelp" label="操作">
              <template slot-scope="scope">
                <el-button @click="guanliduijie(scope.row)" type="text" style="margin-right: 10px;" v-if="scope.row.channel_id != null">管理对接产品</el-button>
                <el-button @click="dingdanchongti(scope.row)"  type="text">订单重提</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination background layout="total,prev, pager, next" :current-page="searchs.page" @current-change="fanye" :page-size="searchs.page_size" :total="total" style="margin-top: 20px;"></el-pagination>
          <!-- 对接流程 -->
          <div class="t_djstept_box">
            <div style="color:#7D7D7D;margin-bottom:50px">自动生产接口对接流程</div>
            <div>
              <el-steps :active="4" align-center>
                <el-step title="申请对接" description="联系商务对接提供：接口文档及文档对接参数"></el-step>
                <el-step title="技术评估" description="拉群沟通评估费用及开发周期"></el-step>
                <el-step title="接口完成配置产品" description="在需要自动生产的产品上配置自动生产的接口"></el-step>
                <el-step title="测试期" description="跟踪订单提交情况，了解返回订单失败原因及处理方法"></el-step>
              </el-steps>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- <foot></foot> -->
    <!-- 二维码弹窗 -->
    <el-dialog title="联系微信客服" center :visible.sync="chatwxshow" width="300px">
      <img style="width: 100%;" src="../../../static/kefu.png" alt="">
    </el-dialog>
    <!-- 查看说明文档 -->
    <el-dialog center title="查看说明文档" :visible.sync="descshow" width="500px">
      <div><a :href="desclink" target="_blank">{{desclink}}</a></div>
    </el-dialog>
    <!-- 开发配置 -->
    <el-dialog center title="编辑/配置" :visible.sync="developshow" width="800px">

    </el-dialog>

    <el-dialog title="异常订单自动处理设置" center :visible.sync="zidonglog" width="800px">
      <el-radio v-model="all.handle_type" label="1" style="margin-bottom: 20px;">
        <div style="font-size: 16px; color: #666; margin-bottom: 10px;">异常订单自动生产失败（粗放）</div>
        <div style="font-size: 14px; color: #999;">提单被上游打回或提单成功后被打回的异常订单直接将订单状态设置为“生产失败”</div>
      </el-radio>
      <el-radio v-model="all.handle_type" label="0">
        <div style="font-size: 16px; color: #666; margin-bottom: 10px;">异常订单人工处理订单（细致）</div>
        <div>
          <div style="font-size: 16px; color: #999; margin-bottom: 10px;">接口返回异常的订单将陈列在“自动生产订单”页面的“提单异常”和“生产异常”中，等待人工处理
          </div>
          <div style="font-size: 14px; color: #999;">ps:您可以根据常见的异常原因创建规则来自动处理响应的订单。</div>
        </div>
      </el-radio>

      <div slot="footer" class="dialog-footer">
        <el-button round type="danger" @click="queding">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改接口渠道名称" center :visible.sync="log" width="440px">
      <el-input placeholder="请输入接口渠道名称" v-model="xiugaiall.user_defined_name">
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button round type="danger" @click="queding2">确定</el-button>
      </div>
    </el-dialog>
    <!-- 在网状态查询 -->
    <el-dialog title="在网状态查询" :center="true" :visible.sync="ischecktimeshow" width="500px">
      <el-date-picker style="width: 100%;" v-model="checktime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <div style="text-align: center;padding-top: 30px;">
        <el-button type="danger" round style="background-color: #2974FF;" @click="checkbtn">查询</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单重提" :visible.sync="logc" width="400px" :close-on-click-modal="false"
      :close-on-press-escape="false">

      <!-- <el-select v-model="chongtiall.time" style="width: 400px; margin-bottom: 20px;" placeholder="请选择周期">
        <el-option :label="item" :value="item" v-for="item in 100"></el-option>

      </el-select> -->
      <div class="kflexc" style="background: rgb(243, 245, 248); border-radius: 10px;">
        <div style="width: 80px; text-align: center; color: rgb(102, 102, 102);">重提范围</div>
        <el-select v-model="chongtiall.type" style="width: 160px;" placeholder="请选择状态">
          <el-option label="重提提单失败订单（最近7天）" value="1"></el-option>
          <el-option label="重提全部订单（最近7天）" value="2"></el-option>
        </el-select>
      </div>

      <div style="color: #f00; font-size: 12px; margin: 20px 0 0 0;">提醒:确认上游系统支持订单重提，部分接口重提会导致意外问题</div>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="logc = false">取消</el-button>
        <el-button round type="danger" @click="quedingchongti">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="录入cookie" :center="true" :visible.sync="logcook" width="1000px">

      <el-input type="textarea" placeholder="请输入cookie" v-model="cookieall.cookie"></el-input>
      <!-- <div style="margin: 20px 0; color: rgb(0, 72, 255);">
        如何获取cookie？
      </div> -->
      <div style="text-align: center;padding-top: 30px;">
        <el-button type="info" round @click="logcook = false">取消</el-button>
        <el-button type="danger" round style="background-color: #2974FF;" @click="cookiego">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加/编辑 -->
    <el-dialog center title="配置" :visible.sync="log3" width="600px">
    		<div v-for="(item,index) in inputlistall" :key="index" :label="item.name" style="margin-bottom: 20px;">
          <div class="kflexc" v-if='item.type=="text"'>
            <div style="width: 180px; text-align: right; margin-right: 20px;">{{item.name}}:</div>
            <div><el-input  @input="inputChange"  v-model="inputadd[item.key]" size="small" :type="item.type" ></el-input></div>
          </div>
          <div class="kflexc" v-if='item.type=="radio"'>
            <div style="width: 180px; text-align: right; margin-right: 20px;">{{item.name}}:</div>
            <div>
              <el-radio-group  v-model="inputadd[item.key]">
              	<el-radio @change="inputChange" v-for="(item2,index2) in item.data"
              	:key="index2"
              	:label="item2.value" >{{item2.name}}</el-radio>
              </el-radio-group>
            </div>
          </div>
    		</div>

        <div class="kflexcc" style="width: 100%;">
          <el-button @click="peizhigo" type="danger" round>确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'


  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'productionBasismanagDj',
    data() {
      return {
        act: 2,
        log: false,
        logc: false,
        chongtiall: {
          time: "",
          channel_id: "",
          type: "" //1 异常单 2 全部
        },
        qudaolist: [],
        zidonglog: false,
        all: {
          channel_id: "", //	int	渠道id
          handle_type: 0, //	int	0人工处理 1自动处理
        },
        tableData: [],
        //联系微信客服弹窗
        chatwxshow: false,
        //说明文档链接弹窗
        descshow: false,
        //说明文档链接
        desclink: '',
        //开发配置弹窗
        developshow: false,
        //搜索
        searchfrom: {
          c_name: ''
        },
        xiugaiall: {
          channel_id: "",
          user_defined_name: ""
        },
        shopid: '',
        ischecktimeshow: false,
        checktime: [],
        onlinerow: {},
        logcook:false,
        cookieall:{
          config_id:"",
          channel_id:"",
          cookie:""
        },
        searchs:{
          api_type:2,
          page:1,
          page_size:20
        },
        total:0,
        inputlistall:[],
        inputadd:{},
        log3:false
      }
    },
    created() {
      //获取列表
      this.getlist()
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
    },

    methods: {
      peizhigo:function(){
        axios.post('/api/plan-market/upstream/channel/create_store', this.inputadd)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.log3 = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      huoqucanshu:function(item){
        axios.get('/api/plan-market/upstream/channel/info?id='+item.config_id+'&channel_id='+item.channel_id)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.inputadd = {}
              let data = JSON.parse(response.data.data.data)


              let arr = []
              data.forEach(item=>{
                let obj = {}
                obj['type'] = item.type
                obj['name'] = item.name
                obj['key'] = item.key
                arr.push(obj)

                if(response.data.data.channel_data){
                  let data2 = JSON.parse(response.data.data.channel_data)
                  this.$set(this.inputadd,item.key,data2[item.key])
                }else{
                  this.$set(this.inputadd,item.key,'')
                }

              })


              this.$set(this.inputadd,'y_name',response.data.data.y_name)
              this.$set(this.inputadd,'id',response.data.data.id)
              if(item.channel_id){
                this.$set(this.inputadd,'channel_id',item.channel_id)
              }



              this.inputlistall = arr
              this.log3 = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye:function(page){
      	this.searchs.page = page
      	this.getlist()
      },
      cookiego:function(){
        if(!this.cookieall.cookie){
          this.$message.error('cookie不能为空');
          return false
        }
        axios.post('/api/plan-market/upstream/channel/cookie/update', this.cookieall)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.logcook = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      opencookie:function(item){
        this.cookieall = {
          config_id:item.config_id,
          channel_id:item.channel_id,
          cookie:""
        }
        this.logcook = true
      },
      guanliduijie:function(item){
        let upload_resource = 1
        if(item.data && JSON.parse(item.data)){
          upload_resource = JSON.parse(item.data).upload_resource
        }
        this.$router.push({
          path:"/productionBasismanagAdd",
          query:{
            channel_id:item.channel_id,
            upload_resource:upload_resource,
            api_type:2
          }
        })
      },
      quedingchongti: function() {
        axios.post('/api/plan-market/upstream/order/resubmit', this.chongtiall)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.logc = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      dingdanchongti: function(item) {

        this.$router.push('/productionBasismanag/productionBasismanagAItidan?id='+item.channel_id+'&name='+item.user_defined_name)
      },
      xiugai2: function(item) {
        this.xiugaiall.channel_id = item.channel_id
        this.xiugaiall.user_defined_name = item.user_defined_name
        this.log = true
      },
      queding2: function() {
        axios.post('/api/plan-market/upstream/channel/defined/name', this.xiugaiall)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.log = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xiugai: function(item) {
        console.log(item)
        this.all.channel_id = item.channel_id
        this.all.handle_type = item.handle_type.toString()
        this.zidonglog = true
      },
      queding: function() {
        axios.post('/api/plan-market/upstream/channel/handle/type', this.all)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.zidonglog = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取列表
      getlist() {
        axios.get('/api/plan-market/upstream/channel/config/list',{params:this.searchs})
          .then((response) => {
            this.tableData = response.data.data.list
            this.total = response.data.data.count

            // for(var x= 0;x<this.tableData.length;x++){
            // 	if(this.tableData[x].data==''){
            // 		this.tableData[x].data='[]'
            // 	}
            // }
          })
      },
      //所搜
      search() {
        //获取列表
        this.getlist()
      },
      //点击打开客服二维码弹窗
      openwx() {
        this.chatwxshow = true
      },
      //点击打开查看文档
      checkdesc(link) {
        this.descshow = true
        this.desclink = link
      },
      //打开开发配置弹窗
      opendev() {
        this.developshow = true
      },
      //查看在网状态弹窗
      checkison(row) {
        console.log(row)
        this.onlinerow = row
        this.ischecktimeshow = true
        this.checktime = []
      },
      //查询
      checkbtn() {
        console.log(this.checktime)
        if (this.checktime == null || this.checktime.length == 0) {
          this.$message.error('请选择时间');
        }


        axios.post('/api/plan-market/upstream/channel/online/add', {
            "channel_name": this.onlinerow.c_name,
            "channel_id": this.onlinerow.channel_id,
            "start_at": this.checktime[0],
            "end_at": this.checktime[1]
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$router.push({
                path: '/productionBasismanag/apicheckorder'
              })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })



      },
      //在网查询记录
      tocheckison() {
        this.$router.push({
          path: '/productionBasismanag/apicheckorder'
        })
      }

    }
  }
</script>


<!-- /deep/ .el-step__description.is-finish{
	color: #7D7D7D;
} -->
</style>
<style lang="scss" scoped>
  /deep/ .el-dialog {
    border-radius: 10px;
  }
  /deep/ .el-textarea__inner{
    background: #F3F5F8; height: 230px; border: 0;
  }

  .index {

    /deep/ .el-select {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input__inner {
      line-height: 36px;
      height: 36px;
      font-size: 14px;
      color: rgb(51, 51, 51);
      background: rgb(247, 248, 250);
      border: 0;
    }

    /deep/ .el-range-editor .el-range-input {
      background: #f7f8fa;
    }

    /deep/ .el-button {
      padding: 11px 23px !important;
    }

    /deep/ .el-button--text {
      padding: 11px 0 !important;
    }

    /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
    }

    /deep/ .el-input__inner:-moz-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .td2 .el-button {
      padding: 11px 0px !important;
    }

    /deep/ .pagination-container .el-select {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input__inner {
      line-height: 28px;
      height: 28px;
    }

    /deep/ .el-pagination.is-background .btn-prev:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .btn-prev {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2974FF;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
      color: #fff;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #2974FF;
    }

    /deep/ .el-pager li {
      border-radius: 14px;
      background: rgba(255, 255, 255, 1);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .btn-prev {
      border-radius: 14px;
      padding: 0 10px;
    }

    /deep/ .btn-next {
      border-radius: 14px;
      padding: 0 10px;
    }

    .t_add_cont {
      padding: 20px 25px;
    }

    /deep/ .el-radio {
      display: flex;
      font-size: 14px;
    }

    .t_tips_box {
      background-color: rgb(241, 248, 255);
      border-radius: 10px;
      display: flex;
      // justify-content: space-between;
      font-size: 14px;
      padding: 20px;
      color: rgb(49, 150, 255);
      margin-bottom: 20px;
      line-height: 30px;
    }

    .t_chatkf {
      color: #237BFF;
      margin-left: 20px;
      cursor: pointer;
    }

    .t_djstept_box {
      background-color: #F6F6F6;
      padding: 36px 26px;
      margin-top: 50px;
    }

    .see {
      color: #409EFF;
      margin: 20px 0;
      cursor: pointer;
    }

    .cpflex {
      display: flex;
      flex-wrap: wrap;

      /deep/ .el-form-item {
        margin-bottom: 0px;
      }
    }

    .kucun {
      /deep/ .el-input {
        width: 200px;
      }

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }



    .o_ul {
      background: #F9F9F9;
      display: flex;

      .o_li {
        flex-basis: 160px;
        line-height: 45px;
        display: block;
        color: #727272;
        border-top: 3px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .act {
        border-top: 3px #DD2727 solid;
        background: #FFFFFF;
      }
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .bsm {
      padding: 20px 20px 0 20px;

      .el-input {
        width: 220px;
      }
    }

    .row2 {
      color: #FFF;
      margin-top: 20px;

      a {
        color: #FFF;
      }
    }

    .con {
      margin: 20px;
      border: 1px #EAEAEA solid;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }

    .el-pagination {
      text-align: right;
      margin-right: 20px;
      padding-bottom: 50px;
    }


  }
</style>
